<template>
    <div>
        <div class="demo">
        <div @click="updataIsshow">
            隐藏
        </div>
        <div>
            <div>{{playlist.name}}</div>
            <div>歌手</div>
        </div>
        <div>歌名</div>
    </div>

    <!-- 背景 -->
    <div class="bg">
        <img :src="playlist.al ? playlist.al.picUrl : playlist.picUrl" alt=""/>
    </div>

    <!-- 磁盘、磁针 -->
    <div class="pic">
        <!-- 磁针 -->
        <div class="cz">
            <img src="../assets/cz.png" alt="">
        </div>
        <!-- 磁盘 -->
        <div class="cp">
            <img src="../assets/cp.png" alt="">
            <!-- 封面图 -->
            <div class="cp-img">
                <img 
                :style="`animation-play-state:${show ? 'running':'paused'}`"
                :src="playlist.al ? playlist.al.picUrl : playlist.picUrl" alt="">

            </div>
        </div>
        <!-- 歌词部分 -->
        <div class="lyric">
            <!-- <div>{{ lyricList.lyric }}</div> -->
            <div class="content" :style="`top:-${demo}px`">
                <div 
                class="list" 
                v-for="(item,index) in lyrics" 
                :class="{demo9: current* 1000 >= item.time && current* 1000 <item.next}">
                    {{ item.res }}
                </div>
            </div>
        </div>

        
        <!-- 评论 -->
        <div class="pinglun">
            <div>上一首</div>
            <div class="ctl" >
                <!-- 播放 -->
                <div v-if="!show"><van-icon size="30" name="play-circle-o" /> </div>
                <!-- 暂停 -->
                <div v-else><van-icon size="30" name="pause-circle-o" /> </div>
            </div>
            <div>下一首</div>
            
                <router-link to="/pinglun">评论</router-link>
                
            
        </div>


    </div>
    </div>
</template>

<script>
import { mapMutations,mapState } from 'vuex'
export default {
    props: ['playlist','show'],
    data() {
        return {
            demo:0
        };
    },
    watch:{
        current(){
            let LyricActive = document.getElementsByClassName("demo9")[0];
            //console.log(LyricActive.offsetTop);
            if(LyricActive.offsetTop > 33){
                this.demo = LyricActive.offsetTop - 70;
            }else{
                this.demo = 0;
            }
        }
    },
    computed: {
        ...mapState(['lyricList','current']),
        lyrics(){
            //存放切割好的歌词数据
            let arr1;
            if(this.lyricList.lyric){
                arr1 = this.lyricList.lyric.split(/\n/).map(v =>{
                    //拆分时间、歌词
                    //获取分钟
                    let m = v.slice(1,3)
                    //获取秒钟
                    let s = v.slice(4,6)
                    //获取毫秒
                    let mm = v.slice(7,10)
                    let time = 
                        parseInt(m) *1000 *60 + parseInt(s) *1000 + parseInt(mm);
                    let res = v.slice(11,v.length);
                    if(isNaN(Number(mm))){
                        time = parseInt(m) *1000 *60 + parseInt(s) *1000 +parseInt(mm);
                        mm = v.slice(7,9);
                        res = v.slice(10,v.length);
                    }
                    return { v, m, s, mm, time, res};
                });
                arr1.forEach((item, i) => {
                    if(i == arr1.length - 1 || isNaN(arr1[i+1].time)){
                        item.next = 9999999999;
                    }else{
                        item.next = arr1[i + 1].time;
                    }
                });
            }
            //console.log(arr1);
            return arr1;
        }
    },
    methods: {
        ...mapMutations(['updataIsshow'])
    },
}
</script>

<style lang="less" scoped>
.pic{
    display: flex;
    flex-direction: column;
    align-items: center;
    .cz{
        width: 90px;
        position: relative;
        left: 30px;
        img{
            width: 100%;
        }
    }
    .cp{
        width: 300px;
        position: relative;
        z-index: -1;
        top: -70px;
        .cp-img{
            position: absolute;
            top: calc(50% - 90px);
            left: calc(50% - 90px);
            width: 180px;
            height: 180px;
        img{
            border-radius: 50%;
            width: 100%;
            animation: demo99 8s linear infinite;
    }
}
img{
    width: 100%;
}
    }
@keyframes demo99 {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
    
}
.lyric{
    position: relative;
    top: -50px;
    width: 80%;
    height: 100px;
    text-align: center;
    overflow: hidden;
    color: #fff;
    .content{
        width: 100%;
        position: absolute;
        top: 0px;
        line-height: 33px;
        transition: all 0.2s linear;
        .demo9{
            color: red;
            font-size: 17px;
            transition: all 0.2s linear;
         }
        }
    }

.pinglun{
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: space-between;
    padding: 0 10px;

}

.bg{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    img{
        width: 100%;
        height: 100%;
        filter: blur(100px);
    }
    &::before{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background-color: #000;
        opacity: 0.3;
    }
}
.demo{
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: space-between;
    padding: 0 10px;
}
</style> 

